<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 70px;
        margin: 0 auto;
        border: 1px solid pink;

      }
      span {
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container">
  <input type="checkbox">全选
    <br>
  <input type="checkbox" name="option">选项一
  <input type="checkbox" name="option">选项二
  <input type="checkbox" name="option">选项三
  <input type="checkbox" name="option">选项四
</div>
<script>
  //获得全选框
  var allbtn = document.querySelector('input');
  var btns = document.querySelectorAll('input:nth-child(n + 2)');

  allbtn.onclick = function () {
    var flag = allbtn.checked;
    if (flag) {
      btns.forEach(function (value) {
        value.checked = true;
      })
    } else {
      btns.forEach(function (value) {
        value.checked = false;
      })
    }
  }
  for (var j = 0;j < btns.length;j++) {
    //给每一个的选项都要加一个点击时间
    btns[j].onclick = function () {
      var sum = 0;
      for (var i = 0;i < btns.length;i++) {
        if (btns[i].checked) {
          sum += 1;
        }
      }
      if (sum === 4) {
        allbtn.checked = true;
      } else {
        allbtn.checked = false;
      }
    }
  }


</script>
</body>
</html>